{% extends "base.html" %}

{% block title %}Browse Activities - Volunteer Platform{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="sidebar">
        <nav class="dashboard-nav">
            <ul>
                <li><a href="{{ url_for('volunteer_dashboard') }}">Dashboard</a></li>
                <li class="active"><a href="{{ url_for('volunteer_activities') }}">Browse Activities</a></li>
                <li><a href="{{ url_for('volunteer_my_activities') }}">My Activities</a></li>
                <li><a href="{{ url_for('volunteer_profile') }}">Profile</a></li>
            </ul>
        </nav>
    </div>

    <div class="main-content">
        <h1>Browse Activities</h1>
        
        <div class="filters">
            <form method="GET" action="{{ url_for('volunteer_activities') }}" class="filter-form">
                <input type="text" name="keyword" placeholder="Search activities..." value="{{ request.args.get('keyword', '') }}">
                <select name="category">
                    <option value="">All Categories</option>
                    <option value="education" {% if request.args.get('category') == 'education' %}selected{% endif %}>Education</option>
                    <option value="environment" {% if request.args.get('category') == 'environment' %}selected{% endif %}>Environment</option>
                    <option value="healthcare" {% if request.args.get('category') == 'healthcare' %}selected{% endif %}>Healthcare</option>
                    <option value="elderly" {% if request.args.get('category') == 'elderly' %}selected{% endif %}>Elderly Care</option>
                    <option value="other" {% if request.args.get('category') == 'other' %}selected{% endif %}>Other</option>
                </select>
                <input type="date" name="date" value="{{ request.args.get('date', '') }}">
                <button type="submit" class="btn">Filter</button>
            </form>
        </div>

        {% if activities %}
        <div class="activities-grid">
            {% for activity in activities %}
            <div class="activity-card">
                <div class="activity-header">
                    <h3>{{ activity.title }}</h3>
                    <span class="badge {% if activity.status == 'pending' %}bg-warning text-dark
                          {% elif activity.status == 'approved' %}bg-success
                          {% elif activity.status == 'rejected' %}bg-danger
                          {% elif activity.status == 'completed' %}bg-info
                          {% else %}bg-secondary{% endif %}">
                        {% if activity.status == 'pending' %}Pending Review
                        {% elif activity.status == 'approved' %}Approved
                        {% elif activity.status == 'rejected' %}Rejected
                        {% elif activity.status == 'completed' %}Completed
                        {% else %}Unknown Status{% endif %}
                    </span>
                </div>
                <div class="activity-details">
                    <p class="activity-organization">Organization: {{ activity.organization_name }}</p>
                    <p class="activity-date">
                        Start Time: {{ activity.start_date.strftime('%Y-%m-%d %H:%M') }}<br>
                        End Time: {{ activity.end_date.strftime('%Y-%m-%d %H:%M') }}
                    </p>
                    <p class="activity-location">Location: {{ activity.location }}</p>
                    <p class="activity-participants">Registrations: {{ activity.current_participants }}/{{ activity.max_participants }}</p>
                    <div class="activity-actions">
                        <a href="{{ url_for('activity_detail', activity_id=activity.id) }}" class="btn btn-primary">View Details</a>
                        {% if activity.status == 'approved' and not activity.is_registered %}
                        <form method="POST" action="{{ url_for('volunteer_register_activity', activity_id=activity.id) }}" class="d-inline">
                            <button type="submit" class="btn btn-success" 
                                    {% if activity.current_participants >= activity.max_participants %}disabled{% endif %}>
                                {% if activity.current_participants >= activity.max_participants %}Full{% else %}Register{% endif %}
                            </button>
                        </form>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- Pagination -->
        <nav class="mt-4">
            <ul class="pagination justify-content-center">
                {% if page > 1 %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('volunteer_activities', page=page-1, **request.args) }}">Previous</a>
                </li>
                {% endif %}
                
                <li class="page-item active">
                    <span class="page-link">{{ page }}</span>
                </li>
                
                {% if has_next %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('volunteer_activities', page=page+1, **request.args) }}">Next</a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% else %}
        <div class="alert alert-info">
            No activities found matching your criteria.
        </div>
        {% endif %}
    </div>
</div>
{% endblock %} 